<template>
  <el-dialog :title="showTitle" :visible.sync="show" :close-on-click-modal="false" :show-close="false" width="90%" @closed="closed">
    <el-steps :active="currStep" finish-status="success" v-if="isCheck">
      <el-step title="项目安排" />
      <el-step title="安排内容确认" />
      <el-step title="完成" />
    </el-steps>
    <el-steps :active="currStep" finish-status="success" v-else-if="isChoose">
      <el-step title="项目抽取范围设定" />
      <el-step title="抽取内容确认" />
      <el-step title="完成" />
    </el-steps>

    <div v-if="currStep === 0" style="overflow: auto">
      <ProjectArrangement ref="ProjectArrangement" v-if="isCheck" @changeBsNode="onChangeBsNode" @cancel="show = false" @saveSuccess="displayResult" />
      <ProDrawRange ref="ProDrawRange" v-else-if="isChoose" @changeBsNode="onChangeBsNode" @cancel="show = false" @ok="displayResult" />
    </div>
    <div v-else-if="currStep === 1">
      <ProDrawResult ref="ProDrawResult" @ok="onProDrawResult" />
    </div>
    <el-result v-else-if="currStep === 2" icon="success" title="完成">
      <el-button slot="extra" type="primary" @click="onFinish">关 闭</el-button>
    </el-result>
  </el-dialog>
</template>
<script>
// 检查项目抽取工具
import ProjectArrangement from './ProjectArrangement'
import ProDrawRange from './ProDrawRange'
import ProDrawResult from './ProDrawResult'
export default {
  components: { ProjectArrangement, ProDrawRange, ProDrawResult },
  data() {
    return {
      show: false,
      currStep: 0,
      peRecordId: '', // 有值为补抽
      firAss: '',
      dept1List: [], // 集群
      deptId1: '', // 已选集群
      bsNode: {}
    }
  },
  computed: {
    chkType() {
      return this.bsNode.generationType
    },
    isCheck() {
      // 安排
      return this.chkType === 'CHECK'
    },
    isChoose() {
      // 抽取
      return this.chkType === 'CHOOSE'
    },
    showTitle() {
      const supp = this.peRecordId ? '（补抽）' : ''
      return this.isCheck ? `检查项目安排工具${supp}` : this.isChoose ? `检查项目抽取工具${supp}` : '暂不支持'
    }
  },
  methods: {
    closed() {
      this.currStep = 0
    },
    init(opt) {
      this.peRecordId = opt.peRecordId || ''
      this.firAss = opt.firAss
      this.dept1List = opt.dept1List || []
      this.deptId1 = opt.deptId1
      this.bsNode = opt
      this.show = true
      this.$nextTick(() => {
        const chkType = opt.generationType
        if (chkType === 'CHECK') this.$refs.ProjectArrangement?.open(opt)
        else if (chkType === 'CHOOSE') this.$refs.ProDrawRange?.init(opt)
        else return this.$message.error('暂不支持该检查类型')
      })
    },
    onChangeBsNode(data) {
      // data 包含 bsNode 所有字段，外加 deptId1
      const opt = {
        ...data,
        dept1List: this.dept1List,
        peRecordId: this.peRecordId,
        firAss: this.firAss
      }
      this.init(opt)
    },
    displayResult(data) {
      // data 应包含 peRecordId 和 rltProIds
      this.currStep = 1
      this.$nextTick(() => {
        this.$refs.ProDrawResult?.init(data)
      })
    },
    onProDrawResult() {
      this.currStep = 2
    },
    onFinish() {
      this.show = false
      this.$emit('ok')
    }
  }
}
</script>
